$(function(){
    // 图片对象
    var imgs = [
        {
            src: './image/img1.jpg'
        },{
            src: './image/img2.jpg'
        },{
            src: './image/img3.jpg'
        },{
            src: './image/img4.jpg'
        },{
            src: './image/img5.jpg'
        },{
            src: './image/img6.jpg'
    }]

    $.each(imgs,function(i,e){
        $('<li></li>').html('<img src="'+imgs[i].src+'" alt=""><span class="tran"></span>').appendTo($('#HR_uls'));
    })

    // 滑过头部主体部分右边的图片
    $('#HR_uls>li').hover(function(){
        $(this).children('img').addClass('img_show');
    },function(){
        $(this).children('img').removeClass('img_show');
    })

    $('#HR_uls>li').click(function(){
        console.log($(this).index());
        $(this).children('span').show().parent().siblings().children('span').hide();
        $(this).children('img').css('border','3px solid #ff5d23').css('box-sizing','border-box').parent().siblings('li').children('img').css({"border":"0"});
    })

    // 点击头部主体部分右边的图片是否出现三角
    $('#HR_uls>li>img').click(function(){
        $(this).css('border','3px solid #ff5d23').css('box-sizing','border-box');
        // $('.tran').show().siblings().hide();
    })

    // 穿越火线。。对象
    var cy_sy_wz = [{
        src: './image/chuanyuehuoxian.png',
        p1: '穿越火线',
        p2: '三亿鼠标的枪战梦想'
    },{
        src: './image/shouyou.png',
        p1: '综合手游',
        p2: '开启移动游戏时代'
    },{
        src: './image/juedi.png',
        p1: '绝地王者',
        p2: '热血竞技大吉大利'
    }]

    $.each(cy_sy_wz,function(i,e){
        $('<div class="chuanyue"></div>').html('<div class="chuanyue_top"><img src="'+cy_sy_wz[i].src+'" alt=""><h2>'+cy_sy_wz[i].p1+'</h2><h6>'+cy_sy_wz[i].p2+'</h6></div><div class="chuanyue_main"><ul class="cy_uls"></ul></div>').appendTo($('.content_chuanyue'));
    })

    // 请求穿越火线的资源
    $.ajax({
        type: 'get',
        url: './JSON/chuanyue.json',
        async: false,
        success:function(response,status,xhr) {
            $.each(response.data[0].cy,function(i,e){
                $('<li></li>').html('<div class="img_div"><img src="'+response.data[0].cy[i].src+'" alt=""></div><img src="./image/play.png" class="img_hover" /><p>'+response.data[0].cy[i].title+'</p>').appendTo($('.cy_uls').eq(0));
            })
            $.each(response.data[0].sy,function(i,e){
                $('<li></li>').html('<div class="img_div"><img src="'+response.data[0].sy[i].src+'" alt=""></div><img src="./image/play.png" class="img_hover" /><p>'+response.data[0].sy[i].title+'</p>').appendTo($('.cy_uls').eq(1));
            })
            $.each(response.data[0].wz,function(i,e){
                $('<li></li>').html('<div class="img_div"><img src="'+response.data[0].wz[i].src+'" alt=""></div><img src="./image/play.png" class="img_hover" /><p>'+response.data[0].wz[i].title+'</p>').appendTo($('.cy_uls').eq(2));
            })
        },
        error:function() {
            console.log('请求资源失败');
        }
    })

    // 推荐活动
    var tuijian = [{
        src: './image/tuijian.webp'
    },{
        src: './image/tuijian2.webp'
    },{
        src: './image/tuijian3.webp'
    }]

    // 新闻
    var news_uls = [
        {
            ul1:[{
            src: './image/hot.webp',
                title: '《光速大逃脱》第二期爆笑开播！',
                p: '呆妹、智勋、小片片、叶知秋和袁袁子“寻”身世之谜'
            },{
                src: './image/hot.webp',
                title: '《原神》2.1版本前瞻特别节目',
                p: '8月20日晚21:00官方直播间“掉落”兑换码'
            },{
                src: './image/hot.webp',
                title: 'CSGO Blast中国预选赛8.19正式开战！',
                p: '8月19日-29日斗鱼全程直播'
            }]
            },{
            ul2:[{
                span: '[新闻]',
                title: "《零号任务》前哨测试主播招募"
            },{
                span: '[新闻]',
                title: "《游戏王：决斗链接》盛夏主播招募"
            },{
                span: '[新闻]',
                title: "《三国志·战略版》新赛季战略家招募令前哨"
            },{
                span: '[新闻]',
                title: "斗鱼《魔王与征服》公测招募 冲刺榜单！"
            }]
        }
    ]

    $.each(news_uls[0].ul1,function(i,e){
        $('<li></li>').html('<img src="'+news_uls[0].ul1[i].src+'" alt=""><h5>'+news_uls[0].ul1[i].title+'</h5><p>'+news_uls[0].ul1[i].p+'</p>').appendTo($('.news_uls'));
    })

    $.each(news_uls[1].ul2,function(i,e){
        $('<li></li>').html('<span>'+news_uls[1].ul2[i].span+'</span><p>'+news_uls[1].ul2[i].title+'</p>').appendTo($('.news_uls2'));
    })

    // 请求视频推荐资源
    $.ajax({
        type: 'get',
        url: 'JSON/shipintuijian.json',
        async: false,
        success: function(response,staus,xhr) {
            $.each(response.data,function(i,e){
                $('<li></li>').html('<div class="MRTcontent_left"><img src="'+response.data[i].src+'" alt=""><span>'+response.data[i].timer+'</span></div><div class="MRTcontent_right"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon-test"></use></svg><h2>'+response.data[i].title+'</h2><div><img src="'+response.data[i].img+'" alt=""><p>'+response.data[i].nicheng+'</p></div></div>').appendTo($('.main_uls'));
            })
           // 获取视频推荐里面的ul的高度和里面的li一样
            $('.main_uls').css('height',$('.main_uls>li').height() * response.data.length+50);
        }
    })

    // 请求精彩推荐的资源
    $.ajax({
        type: "get",
        url: "./JSON/wqy_data.json",
        async: false,
        success:function(response,status,xhr) {
            var re = response.data[0].jingcai;
            var re2 = response.data[0].remen;
            // 精彩推荐
            $.each(re,function(i,e){
                $('<li></li>').html('<div><div><img src="'+re[i].src+'" alt=""></div><img src="./image/play.png" class="img_hover" /><p>'+re[i].title+'</p><span>'+re[i].name+'</span><div class="count"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-mine-gray"></use></svg><span>'+re[i].span+'</span><div><svg class="icon" aria-hidden="true"><use xlink:href="#icon-remen"></use></svg><span>'+re[i].count+'</span></div></div></div>').appendTo($('.jingcai_ul'));
            })

            // 热门分类
            $.each(re2,function(i,e){
                $('<li></li>').html('<span class="sort_hover"><img src="./image/sort_bg_hover.webp" alt=""></span><img src="'+re2[i].src+'" alt=""><p>'+re2[i].p1+'</p><p>'+re2[i].p2+'</p>').appendTo($('.remen_uls'));
            })
        }
    })

    // 热门分类移动背景图显示隐藏
    $('.remen_uls>li').hover(function(){
        $(this).children('span').show();
    },function(){
        $(this).children('span').hide();
    })  
    
    // 请求精彩活动内容
    $('.hiddern_box').load('./JSON/wqy_data.json',function(response){
        var act = JSON.parse(response).activity;
        $.each(act,function(i,e){
            $('<li></li>').html('<div><img src="'+act[i].src+'" alt=""><p>'+act[i].title+'</p><p>'+act[i].p+'</p></div>').appendTo($('.activity_uls'));
        })
    })
    
    // 请求资源
    var obj = $.ajax({
        type: 'get',
        url: "./JSON/wqy_data.json",
        async: false,
        success: function(response){
            $.ajax({
                type: 'get',
                url: './JSON/wqy_data.json',
                async: false,
                success:function(response){
                    var _data = response.list;
                    $.each(_data,function(m,e){
                        $('<div class="content_chuanyuehx"></div>').html('<div class="CYcontent_top"><img src="'+e.logo+'" alt=""><h3>'+e.title+'</h3><div><ul><li>'+e.num+'</li><li>|</li><li><div>更多<svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-right"></use></svg></div></li></ul></div></div><div class="CYcontent_main"><ul class="cyhx_uls"></ul></div>').appendTo($('.bg6'));
                        
                        $.each(e.img,function(j,k){
                            $('<li></li>').html('<div><div><img src="'+k.src+'" alt=""></div><img src="./image/play.png" class="img_hover" /><p>'+k.title+'</p><span>'+k.name+'</span><div class="count"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-mine-gray"></use></svg><span>'+k.span+'</span><div><svg class="icon" aria-hidden="true"><use xlink:href="#icon-remen"></use></svg><span>'+k.count+'</span></div></div></div>').prependTo($('.content_chuanyuehx').eq(m).children('.CYcontent_main').eq(0).children('ul').eq(0));
                        })
                        
                    })
                    //让bg6的高度跟里面div高度一样
                    var top_bg6 = $('.bg6').height();
                    top_bg6 = $('.content_chuanyuehx').height() * _data.length;
                }
            })
        }
    })

    // 滑过图片时出现播放按钮
    // 穿越火线 综合手游 绝地王者
    $('.cy_uls>li').hover(function(){
        $(this).children('img').animate({'width':'40px',"height":'40px',"opacity": "1"},100);
    },function(){
        $(this).children('img').animate({'width':'50px',"height":'50px',"opacity": "0"},100);
    })
    // $('.cy_uls>li>img').hover(function(){
    //     $(this).children('img').animate({'width':'40px',"height":'40px',"opacity": "1"},100);
    // },function(){
    //     $(this).children('img').animate({'width':'50px',"height":'50px',"opacity": "0"},100);
    // })

    // 精彩推荐
    $('.jingcai_ul>li>div').hover(function(){
        $(this).children('img').animate({"opacity": "1",'width':'50px',"height":'50px'},100);
        $(this).children('p').css({'width':"100%",'color':'#ff5d23',"white-space":"nowrap","text-overflow":"ellipsis","overflow":"hidden"});
        $(this).children('span').hide();
    },function(){
        $(this).children('img').animate({'width':'60px',"height":'60px',"opacity": "0"},100);
        $(this).children('p').css({'width':"150px",'color':'#333'});
        $(this).children('span').show();
    })
    // 热门分类
    $('.remen_uls>li').hover(function(){
        $(this).children('p').eq(0).css('color','#ff5d23');
    },function(){
        $(this).children('p').eq(0).css('color','#333');
    })
    // 穿越火线17个div
    $('.cyhx_uls>li>div').hover(function(){
        $(this).children('img').animate({"opacity": "1",'width':'50px',"height":'50px'},100);
        $(this).children('p').css({'width':"100%",'color':'#ff5d23',"white-space":"nowrap","text-overflow":"ellipsis","overflow":"hidden"});
        $(this).children('span').hide();
    },function(){
        $(this).children('img').animate({'width':'60px',"height":'60px',"opacity": "0"},100);
        $(this).children('p').css({'width':"150px",'color':'#333'});
        $(this).children('span').show();
    })

    // 单机游戏
    $.ajax({
        type: 'get',
        url: './JSON/wqy_data.json',
        async: false,
        success:function(response) {
            var dj_msg = response.footer[0].dj;
            var kj_msg = response.footer[0].kj;
            var wy_msg = response.footer[0].wy;
            var sy_msg = response.footer[0].sy;
            $.each(dj_msg,function(i,e){
                $('<li></li>').html(e.cont).appendTo($('.danji_uls'));
            })
            $.each(kj_msg,function(i,e){
                $('<li></li>').html(e.cont).appendTo($('.kejiwh_uls'));
            })
            $.each(wy_msg,function(i,e){
                $('<li></li>').html(e.cont).appendTo($('.wangyou_uls'));
            })
            $.each(sy_msg,function(i,e){
                $('<li></li>').html(e.cont).appendTo($('.shouyou_uls'));
            })

            var yule_msg = response.footer[0].yule;
            var zhibo_msg = response.footer[0].zhibo;
            var chaoguan_msg = response.footer[0].chaoguan;
            $.each(yule_msg,function(i,e){
                $('<li></li>').html(e.cont).appendTo($('.yule_uls'));
            })
            $.each(zhibo_msg,function(i,e){
                $('<li></li>').html(e.cont).appendTo($('.zhibo_uls'));
            })
            $.each(chaoguan_msg,function(i,e){
                $('<li></li>').html(e.cont).appendTo($('.chaoguan_uls'));
            })

            // 友情链接
            var lianjie_msg = response.lianjie;
            $.each(lianjie_msg,function(i,e){
                $('<li></li>').html(lianjie_msg[i].cont).appendTo($('.footer_uls'));
            })

            // 请求侧侧边栏数据
            // console.log(response.tarbar);
            $.each(response.tarbar,function(i,e){
                $('<li></li>').html('<span></span>'+e.title+'').appendTo($('.tarbar_uls'));
            })

            var tarbar_li = $('.tarbar_uls>li').height();
            // console.log(tarbar_li);
            
            var tarbar_h = $('.tarbar_uls').height();
            tarbar_h = tarbar_li * response.tarbar.length;
            // console.log(response.tarbar.length);
        }
            
    })

    // 让背景图固定在屏幕后面
    var tarbar_left = $('.tarbar').css('left');
    tarbar_left = $('.content_chuanyuehx').offset().left - 90 + 'px';
    $('.tarbar').css('left',tarbar_left);
    $(window).resize(function(){
        $('.body_bg').css({"width": $(window).width(),"height":$(window).height()});
        // console.log($(window).height());
        // console.log($(window).width());
        
        tarbar_left = $('.content_chuanyuehx').offset().left - 90 + 'px';
        $('.tarbar').css('left',tarbar_left);
    })
    $('.body_bg').css({"width": $(window).width(),"height":$(window).height()});

    // QQ WeChat
    $('.qq').hover(function(){
        $(this).css({"background-position":"-2px -27px"});
    },function(){
        $(this).css({"background-position":"-2px 0px"});
    })
    // Wechat
    $('.wechat').hover(function(){
        $(this).css({"background-position":"-2px -56px"});
    },function(){
        $(this).css({"background-position":"-2px -84px"});
    })
    // weibo
    $('.weibo').hover(function(){
        $(this).css({"background-position":"-2px -116px"});
    },function(){
        $(this).css({"background-position":"-2px -145px"});
    })

    // 头部滚轮事件
    // var header_h = $('.Cheader').height();
    // console.log(header_h);
    // var header_cont = $('.Hcontent_left').height();
    // console.log(header_cont);
    var Top = $('.content_chuanyue').offset().top;
    // console.log(Top);



    // 侧边栏滚轮事件
    var num = 0;
    var Height = $('.content_chuanyuehx').eq(0).offset().top;
    // console.log(Height);
    var k = $.parseJSON($('.content_chuanyuehx').length - 1);
    $(window).scroll(function(){

        // 头部导航栏
        if($(window).scrollTop() >= Top) {
            $('.Cheader_bg').css({"position":"fixed","top": "0px","left":"0px","background": "#ECF2F7","z-index":4});
            $('.Cheader_bg>.Cheader>.Cheader_left>img').show();
            $('.Cheader_bg>.Cheader>.Cheader_right>img').show();
            $('#C_uls>li>a').css('color','#333');
            $('#C_uls>li>svg').css('color','#333');
            $('#CR_uls>li>a').css('color','#333');
            $('#CR_uls>li>svg').css('color','#333');

            //右边定位条
            $('.fix>div').eq(0).css({'height': '238px'});
        }else {
            $('.Cheader_bg').css({"position":"relative","top": "0px","left":"0px","background":"rgba(0,0,0,0)"});
            $('.Cheader_bg>.Cheader>.Cheader_left>img').hide();
            $('.Cheader_bg>.Cheader>.Cheader_right>img').hide();
            $('#C_uls>li>a').css('color','#fff');
            $('#C_uls>li>svg').css('color','#fff');
            $('#CR_uls>li>a').css('color','#fff');
            $('#CR_uls>li>svg').css('color','#fff');

            $('.fix>div').eq(0).css({'height':'190px'});
        }
        
        if($(window).scrollTop() >= Height - 60) {
            $('.tarbar').show();
        }else {
            $('.tarbar').hide();
        }


        var window_top = $(window).scrollTop();
        // console.log(window_top);
        $.each(obj.responseJSON.list,function(i,e) {
            num = i;
            if(window_top >= $('.content_chuanyuehx').eq(i).offset().top - $('.Cheader_bg').height()) {
                $('.tarbar_uls>li').eq(i).css({'background-image': 'linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ),url(./image/left'+(i+1)+'.webp)',"font-style":"italic","color": "#fff"}).siblings().css({'background-image': 'linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) )',"font-style":"normal","color": "#333"});
                $('.tarbar_uls>li').eq(i).children('span').show().siblings('span').show();
            }
            num--;
        })
        
        

    })

    // 侧边栏点击事件
    $('.tarbar_uls>li').click(function(){
        num = $(this).index();
        // console.log($(this).index());
        $(this).css({'background-image': 'linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ),url(./image/left'+($(this).index()+1)+'.webp)',"font-style":"italic","color": "#fff"}).siblings().css({'background-image': 'linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) )',"font-style":"normal","color": "#333"});
        $(this).children('span').show().siblings('span').show();

        $('html,body').animate({'scrollTop': $('.content_chuanyuehx').eq($(this).index()).offset().top - $('.Cheader_bg').height() + 10 + 'px'},1000);
    })

    //侧边栏移入事件
    $('.tarbar_uls>li').hover(function(){
        
        var left_hover = '.left'+($(this).index()+1)+'_hover.webp';
        // console.log(left_hover);
        if($(this).index() != num) {
            $(this).css({'color':'#FF5D23'});
        }
    },function(){
        if($(this).index() != num) {
            $(this).css({'color':'#333'});
        }
    })

    // 右边定位条返回顶部
    $('.fix_five').click(function() {
        $('html,body').animate({'scrollTop': '0px'},1000);
    })

    //右侧定位条滑过变文字
    $('.fix>div>div').hover(function(){
        $(this).children('div').show();
        $(this).children('svg').hide();
    },function(){
        $(this).children('div').hide();
        $(this).children('svg').show();
    })
    
    // 右侧话滑过显示下拉框
    $('.fix_one').eq(0).hover(function(){
        $('.fix_one_hover').show();
    },function(){
        $('.fix_one_hover').hide();
    })
    $('.fix_one_hover').hover(function(){
        $('.fix_one_hover').show();
    },function(){
        $('.fix_one_hover').hide();
    })

    $('.fix_two').eq(0).hover(function(){
        $('.fix_two_hover').show();
    },function(){
        $('.fix_two_hover').hide();
    })
    $('.fix_two_hover').hover(function(){
        $('.fix_two_hover').show();
    },function(){
        $('.fix_two_hover').hide();
    })
      

    //轮播图
    var j = 0;
    var timer = setInterval(play_auto,6000);
    function play_auto() {
        j ++;
        if(j == 4) {
            $('.lunbo').animate({"margin-left": '0px'},0);
            j = 1;
        }
        $('.lunbo').animate({"margin-left": -340 * j + 'px'},6000);
    }
    play_auto();
    $('.lunbo_div').mouseover(function(){
        clearInterval(timer);
        $('.lunbo_left').fadeIn();
        $('.lunbo_right').fadeIn();
    })
    $('.lunbo_div').mouseout(function(){
        timer = setInterval(play_auto,6000);
        $('.lunbo_left').fadeOut();
        $('.lunbo_right').fadeOut();
    })

    $('.lunbo_right').click(function(){
        j ++;
        if(j == 4) {
            j = 1;
        }
        $('.lunbo').animate({"margin-left": -340 * j + 'px'},0);
    })
    $('.lunbo_left').click(function(){
        j --;
        if(j == 0) {
            j = 3;
        }
        $('.lunbo').animate({"margin-left": -340 * j + 'px'},0);
    })
})